<script lang='ts' setup>
import {ElMessage} from 'element-plus'
import { IFatForm } from '../type'
import {bExportVueCode} from '../config'

const props = defineProps<{
  data: IFatForm;
}>()
const emit = defineEmits<{
  (event: 'update:data', data: any): void
  (event: "showFormSetting"): void
  (event: "showPreview"): void
}>()

const data = computed({
  get() { return props.data },
  set() {
    emit('update:data', data.value)
  }
})

function getJson() {
  if(navigator.clipboard){
    navigator.clipboard.writeText(JSON.stringify(data.value))
    ElMessage.success("json已复制至剪切板")
  }else{
    ElMessage.error('此功能仅支持https协议')
  }

}

async function genVue(e: MouseEvent) {
  // const form = new FatForm(data.value)
  // await navigator.clipboard.writeText(form.vueCode)
  // ElMessage.success('已复制到剪切板')
  // console.log(form.vueCode);
  ElMessage.info('开发中')
}

function showFormSetting() {
  emit("showFormSetting")
}
function showPreview() {
  emit("showPreview")
}
</script>

<template>
  <el-card shadow="always" :body-style="{ padding: '4px 1rem' }">
    <el-row :gutter="20">
      <el-link type="danger" :underline="false" style="margin-right: 1rem;">1. 编辑界面输入,可设置默认值</el-link>
      <el-link type="danger" :underline="false" style="margin-right: 1rem;">2. 选项较多时, 建议使用下拉选择框(支持多选)</el-link>
      <el-button type="primary" size="small" @click="getJson">复制json</el-button>
      <el-button type="primary" v-if="bExportVueCode" size="small" @click="genVue">导出vue代码(无布局)</el-button>
      <el-button type="warning" size="small" @click="showFormSetting">表单设置</el-button>
      <el-button type="success" size="small" @click="showPreview">表单预览</el-button>
    </el-row>
  </el-card>
</template>

<style lang='scss' scoped></style>